<template>
  <div class="switchText">
    <el-switch
      v-model="status"
      :active-color="activeColor"
      :inactive-color="inactiveColor"
      :active-text="activeText"
      :inactive-text="inactiveText"
    />
  </div>
</template>
<script>
export default {
  name: 'SwitchText',
  props: {
    activeColor: {
      type: String,
      default: '#13ce66'
    },
    inactiveColor: {
      type: String,
      default: '#6D7074'
    },
    activeText: {
      type: String,
      default: 'ON'
    },
    inactiveText: {
      type: String,
      default: 'OFF'
    },
    value: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      status: true
    }
  },
  watch: {
    value(v) {
      this.status = v
    },
    status: {
      handler(v) {
        this.$emit('update:value', v)
      }
      // immediate: true
    }
  }
}
</script>
<style lang="scss" scoped>
.switchText {
    display: inline-block;
    /deep/.el-switch__label * {
        line-height: 1;
        font-size: 12px;
        display: inline-block;
    }

    /deep/.el-switch__label {
        position: absolute;
        display: none;
        color: #fff !important;
        font-size: 12px !important;
    }

    /*打开时文字位置设置*/
    /deep/.el-switch__label--right {
        z-index: 1;
        right: 25px;
    }

    /*关闭时文字位置设置*/
    /deep/.el-switch__label--left {
        z-index: 1;
        left: 25px;
    }

    /*显示文字*/
    /deep/.el-switch__label.is-active {
        display: block;
    }

    /*开关宽度*/
    /deep/.el-switch .el-switch__core,
    .el-switch .el-switch__label {
        width: 60px !important;
    }
}
</style>
